<template>
	<view class="container">
		<view class="page-header">
			<text class="page-title">联系客服</text>
		</view>

		<view class="contact-options">
			<view class="option-card" @click="callCustomerService">
				<!-- <image class="option-icon" src="/static/mine/phone.png"></image> -->
				<view class="option-content">
					<text class="option-title">客服电话</text>
					<text class="option-desc">工作时间：9:00-18:00</text>
				</view>
				<text class="contact-value">400-123-4567</text>
			</view>

			<view class="option-card" @click="openOnlineService">
				<!-- <image class="option-icon" src="/static/mine/chat.png"></image> -->
				<view class="option-content">
					<text class="option-title">在线客服</text>
					<text class="option-desc">即时解答您的问题</text>
				</view>
				<text class="arrow">></text>
			</view>

			<view class="option-card" @click="openFAQ">
				<!-- <image class="option-icon" src="/static/mine/faq.png"></image> -->
				<view class="option-content">
					<text class="option-title">常见问题</text>
					<text class="option-desc">快速查找解决方案</text>
				</view>
				<text class="arrow">></text>
			</view>
		</view>

		<view class="feedback-section">
			<text class="section-title">您对我们的服务满意吗？</text>
			<view class="rating">
				<view class="star" v-for="i in 5" :key="i" @click="setRating(i)">
					<text :class="{'star-filled': i <= rating, 'star-empty': i > rating}">★</text>
				</view>
			</view>
			<button class="feedback-btn" @click="submitFeedback">提交评价</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rating: 0
			}
		},
		methods: {
			callCustomerService() {
				uni.makePhoneCall({
					phoneNumber: '4001234567'
				});
			},
			openOnlineService() {
				// 打开在线客服聊天页面
				uni.navigateTo({
					url: '/pages/mine/customerService/onlineChat'
				});
			},
			openFAQ() {
				// 打开常见问题页面
				uni.navigateTo({
					url: '/pages/mine/customerService/faq'
				});
			},
			setRating(value) {
				this.rating = value;
			},
			submitFeedback() {
				if (this.rating === 0) {
					uni.showToast({
						title: '请先进行评分',
						icon: 'none'
					});
					return;
				}

				uni.showToast({
					title: '感谢您的反馈！',
					icon: 'success'
				});
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.page-header {
		padding: 20rpx 0 40rpx;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.contact-options {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.option-card {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.option-card:last-child {
		border-bottom: none;
	}

	.option-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.option-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.option-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.option-desc {
		font-size: 24rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.contact-value {
		font-size: 28rpx;
		color: #0086f6;
	}

	.arrow {
		font-size: 36rpx;
		color: #999;
	}

	.feedback-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.section-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.rating {
		display: flex;
		margin-bottom: 30rpx;
	}

	.star {
		padding: 0 10rpx;
		font-size: 50rpx;
	}

	.star-filled {
		color: #ffb800;
	}

	.star-empty {
		color: #ddd;
	}

	.feedback-btn {
		width: 80%;
		height: 80rpx;
		background-color: #0086f6;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>